<page-header [title]="'设备管理'"
             [content]="content">
  <ng-template #content>
    <nz-row *ngIf="deviceStatistics" nzType="flex"
            nzJustify="start"
            nzAlign="middle"
            [nzGutter]="16">
      <nz-col nzSpan="1"
              class="row"></nz-col>
      <nz-col [nzSpan]="4"
              class="row">
        <nz-statistic [nzValue]="deviceStatistics.deviceCount "
                      [nzTitle]="'设备总数'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="4"
              class="row">
        <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
        <nz-statistic [nzValue]="deviceStatistics.activeCount"
                      [nzTitle]="title">
          <ng-template #title>
            <nz-badge nzStatus="success"
                      nzText="激活设备"></nz-badge>
          </ng-template>
        </nz-statistic>

      </nz-col>

      <nz-col [nzSpan]="4"
              class="row">
        <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
        <nz-statistic [nzValue]="deviceStatistics.onlineCount"
                      [nzTitle]="onlineTitle">
          <ng-template #onlineTitle>
            <nz-badge nzStatus="success"
                      nzText="当前在线"></nz-badge>
          </ng-template>
        </nz-statistic>
      </nz-col>
    </nz-row>
  </ng-template>

</page-header>
<nz-card [nzTitle]="action"
         [nzExtra]="search">
  <ng-template #action>
    <nz-button-group>
      <button (click)="add()"
              nz-button
              nzType="primary"><i nz-icon
                                  type="plus"></i> 注册设备
      </button>
      <button nz-button
              (click)="export()">
        <i nz-icon
           nzType="download"></i>导出
      </button>
    </nz-button-group>
  </ng-template>
  <ng-template #search>
    <sf #sf [ui]="ui" layout="inline" [button]="{submit:'搜索'}" [schema]="searchSchema"
        (formSubmit)="st.reset($event)"
        (formReset)="st.reset($event)"></sf>
  </ng-template>


  <ng-template #alert>
    <nz-alert [nzType]="'info'"
              [nzShowIcon]="true"
              [nzMessage]="message">
      <ng-template #message>已选择
        <strong class="text-primary">{{ selectedRows.length }}项</strong>
        <a *ngIf="selectedRows.length > 0"
           (click)="st.clearCheck()"
           class="ml-lg">清空</a>

        <a *ngIf="selectedRows.length > 0"
           (click)="updatePrice()"
           class="ml-lg">修改单价</a>
      </ng-template>
    </nz-alert>
  </ng-template>

  <st #st
      [data]="url"
      [header]="alert"
      [bordered]="true"
      (change)="stOnChange($event)"
      [columns]="columns"></st>
</nz-card>




